 <!-- DANG NHAP -->

  <div class="col-md-8">

      <h5 class="font"> CẬP NHẬT THÔNG TIN CÁ NHÂN</h5>

<link rel="stylesheet" href="public/exts/uploadfile/css/jquery.fileupload-ui.css">

     <script src="public/exts/uploadfile/js/vendor/jquery.ui.widget.js"></script>

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->

<script src="public/exts/uploadfile/js/jquery.iframe-transport.js"></script>

<!-- The basic File Upload plugin -->

<script src="public/exts/uploadfile/js/jquery.fileupload.js"></script> 



    <form class="form-horizontal" role="form" method="post" id="avataform" action="<?php echo url(); ?>">

  

  

    	<?php if($data[error] != "")

{	echo "<Br/><div class='alert alert-danger'>";

	echo "Có Lỗi  :";	

	foreach($data[error] as $value)



	{



		echo "<div>".$value."</div>";



	}



	echo "</div>";



}?>



 <?php if($data['success'] != "")

{

	echo "<Br/><div class='alert alert-success'>";

	echo $data['success'];

	echo "</div>";



}else{?>

  <Br/>

  



  <div class="form-group">

  

  	<div class="form-group">

    		<label for="gioithieu" class="col-lg-4 control-label">Tên Hiển Thị</label>

            <div class="col-lg-8">

                 <input type="text" class="form-control" name="user_name" id="user_name" value="<?php echo $_SESSION['user']['name']; ?> " required />

            </div>

 	 </div>

  

     <div class="form-group">

    		<label for="gioithieu" class="col-lg-4 control-label">Giới Thiệu</label>

            <div class="col-lg-8">

                 <textarea  class="form-control" id="gioithieu"  name="gioithieu" required> <?php echo $_SESSION['user']['gioithieu']; ?></textarea>

            </div>

  </div>

  

   

   <div class="form-group">

  

   		 <label  class="col-lg-4 control-label">Avatar hiện tại</label>

        <div class="col-lg-8" id="current_avatar">

            <?php 

    

            if($_SESSION['user']['avatar']!=""){

                    $tmpArray = explode('_', $_SESSION['user']['avatar']);

                    

            ?>

            <img src="<?php echo $_SESSION['user']['avatar'] ?>" />

            <?php }else

			if($_SESSION['user']['facebook']==1){

				?>

                <img src="https://graph.facebook.com/<?php echo $_SESSION['user']['facebook_id'] ?>/picture" />

            <?php

			}

			

			?>

        </div>

  </div>

  

  

   <div class="form-group" id="avatar_update" style="display:none">

    <label class="col-lg-4 control-label">Avatar mới</label>

    <div class="col-lg-8">

         	  <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

    </div>

  </div>

 

  

    <div class="form-group">

    <label for="password" class="col-lg-4 control-label">Chọn Avatar</label>

    <div class="col-lg-8">

    	<input type="hidden" name="avatar_link" id="avatar_link" value="<?php echo $_SESSION['user']['avatar']; ?> " />

      <input type="file" class="form-control" id="avatar"  name="files[]" multiple> <br/>

           <!-- <div id="progress" class="progress">

            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">

                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>

                </div>	 

            <div class="progress-extended">&nbsp;</div>-->

        </div>

    </div>



  

  

  <div class="form-group">

        <div class="col-lg-offset-2 col-lg-10">

          <button type="submit" class="btn btn-success" id="change">LƯU THAY ĐỔI</button> 

        </div>

  </div>

  

  </div> <!-- End of top form group -->

</form>

<?php }?>



  

  

   </div> 

  </div>

  <!-- DOI MAT KHAU -->

  

  <script>

// Attach a submit handler to the form

$( "#avataform" ).submit(function( event ) {

  // Stop form from submitting normally

  event.preventDefault();

  //var values='module=user&act=avatar&gioithieu='+$('#gioithieu').val()+'&avatar_link='+$('#avatar_link').val()+'&name='+$('#user_name').val();



$.ajax({

  type: "POST",

  url:'<?= HOME ?>index.php?module=user&act=avatar' ,

  data: {gioithieu:$('#gioithieu').val(), avatar_link: $('#avatar_link').val(), name: $('#user_name').val()},

  success: function(data){

		result = $.parseJSON(data);

		if(result.mess){

			popupMessage('Thành công', result ,'alert-success');

		}else if(result.error){

			popupMessage('Thông Báo Lỗi', result ,'alert-danger');

		}

 }

 

});

 

  

});

</script>

  <script>





    $('#avatar').fileupload({

		

		maxNumberOfFiles: 1,

        // Uncomment the following to send cross-domain cookies:

        //xhrFields: {withCredentials: true},

      	//url: 'jqueryupload/server/php/index.php',

      	url: '<?= IMAGE_URL ?>avatar/index.php',

      	progressall: function (e, data) {

            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('.progress-bar').css(

                'width',

                progress + '%'

            ).text(progress + '%');

      	},

		

      	success: function(data){setImageName(data); $('.progress-bar').remove();},

      	error: function (e, data) {

            alert(error);

        }

        

    });



	$('#avatar').bind('fileuploadadd', function(){

		$('#uploadImage_error').remove();

		});

    

    $('#avatar').fileupload('option', {

        maxFileSize: 50000,

        resizeMaxWidth: 1500,

        resizeMaxHeight: 4000,

        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i

    });



    $('#avatar').bind('fileuploaddestroy', function (e, data) {

		resultFileObj = parseQueryString(data.url);

		resultFile = resultFileObj.file;

		$('#avatar').parent().find('input:hidden').each(function(){

			if ($(this).val() == resultFile)  {

		        $(this).remove();

		    }

		});

    });



  





    function setImageName(data){

        

        newData = $.parseJSON(data);



		if(typeof newData.files[0].error != 'undefined'){

			$('#avatar').parent().append('<div id="uploadImage_error" class="alert alert-danger alert-dismissable" style="display: none;"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+ newData.files[0].error +'</div>');

			$('#uploadImage_error').slideDown('fast');	

		}

        

		$.each(newData, function(e1, value1){

			$.each(value1[0], function(e2, value2){

				if(e2 == 'name'){

					$('#avatar_link').val(value2);

				}

				if(e2 == '100Url'){

					$('#current_avatar').html('<img src="' + value2 + '" />');

				}

			});

		

		});



		$.ajax({

			url : '<?= BASE_URL ?>index.php?module=user&act=ajax&setNewAvatar=1',

			type: 'POST',

			data: {newAvatar : newData.files[0].name },

			success: function(dataAvatar){

			}

		});



	}



</script>

  

  

  

  

  

  <script id="template-upload" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

    <tr class="template-upload fade">

        <td>

            <span class="preview"></span>

        </td>

        <td>

            <p class="name">{%=file.name%}</p>

            {% if (file.error) { %}

                <div><span class="label label-danger">Error</span> {%=file.error%}</div>

            {% } %}

        </td>

        <td>

            <p class="size">{%=o.formatFileSize(file.size)%}</p>

            {% if (!o.files.error) { %}

                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>

            {% } %}

        </td>

        <td>

            {% if (!o.files.error && !i && !o.options.autoUpload) { %}

                <button class="btn btn-primary start">

                    <i class="glyphicon glyphicon-upload"></i>

                    <span>Start</span>

                </button>

            {% } %}

            {% if (!i) { %}

                <button class="btn btn-warning cancel">

                    <i class="glyphicon glyphicon-ban-circle"></i>

                    <span>Cancel</span>

                </button>

            {% } %}

        </td>

    </tr>

{% } %}

</script>

  <script src="public/exts/js/jqueryupload/vendor/jquery.ui.widget.js"></script>

<!-- The Templates plugin is included to render the upload/download listings -->

<script src="public/exts/js/jqueryupload/blueimp.js"></script>

<!-- blueimp Gallery script -->

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->

<script src="public/exts/js/jqueryupload/jquery.iframe-transport.js"></script>

<!-- The basic File Upload plugin -->

<script src="public/exts/js/jqueryupload/jquery.fileupload.js"></script>

<!-- The File Upload processing plugin -->

<script src="public/exts/js/jqueryupload/jquery.fileupload-process.js"></script>

<!-- The File Upload image preview & resize plugin -->

<script src="public/exts/js/jqueryupload/jquery.fileupload-image.js"></script>

<!-- The File Upload validation plugin -->

<script src="public/exts/js/jqueryupload/jquery.fileupload-validate.js"></script>

<!-- The File Upload user interface plugin -->



